<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>


<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>  
    <title>产品简介</title>

	<meta http-equiv="cache-control" content="no-cache">
	
    <link rel="stylesheet" type="text/css" href="<%=basePath %>css/form.css" />
  </head>
  
  <body>

<form:form commandName="product" method="post" id="myForm"
          enctype="multipart/form-data" >
                    
<table height="239" >
  <tr>
    <td height="205" colspan="5">
        <img src="<%=basePath %>image/option_2.jpg" width="478" height="197"/>
    </td>
  </tr>
  <tr>
    <td width="115" height="24">
      <label for="radio1">产品样式一</label>
      <form:radiobutton path="model" value="0" id="radio1" checked="true"  onclick="radioClick_1()"/>
    </td>
    <td width="115">
      <label for="radio2">产品样式二</label>
      <form:radiobutton path="model" id="radio2" value="1"  onclick="radioClick_2()"/>
     </td>
    <td width="115">
       <label for="radio3">产品样式三</label>
       <form:radiobutton path="model" id="radio3" value="2" onclick="radioClick_3()"/>
    </td>
     <td width="115">
       <label for="radio4">产品样式四</label>
       <form:radiobutton path="model" id="radio4" value="3"  onclick="radioClick_4()"/>
    </td>
  </tr>
</table>
<div>&nbsp;</div>
<table width="485" height="492">

  
  <tr id="tr_title">
    <td height="30">
       <label for="title">标题 ： </label>
       <form:input path="title" size="30" />
       <form:errors path="title" />
    </td>
  </tr>
  
  
   <c:choose>
    <c:when test="${product.model<2}">
        <tr id="tr_content">
    </c:when>
    <c:otherwise>
         <tr id="tr_content"  style="visibility:hidden">
    </c:otherwise>
  </c:choose>
  
    <td height="87">
      <label for="content">内容 ： </label>
      <form:textarea path="content" cols="55" rows="8" />
      <form:errors path="content" />
    </td>
  </tr>

   <tr>
    <td height="80">
      <label for="image1">图片一 ： </label>
      <input type="file" name="file1" id="image1" onchange='loadImage(this)'/>
        
         <c:if test="${product.id>0}">
            <img src="<%=basePath %>image/Product/Img.do?id=${product.id}&index=1" width="80" height="80"/>
         </c:if>
         
      <div id="preview_fake" style="filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)">
        <img id="preview" onload="onPreviewLoad(this)" />
      </div>
    </td>
  </tr>
  <tr> 
     <td> <form:errors path="image1" /> </td> 
  </tr>
 
 
   <c:choose>
    <c:when test="${product.model==1||product.model==2}">
        <tr id="tr_img_2">
    </c:when>
    <c:otherwise>
         <tr id="tr_img_2"  style="visibility:hidden">
    </c:otherwise>
  </c:choose>
  
    <td height="80">
      <label for="image2">图片二 ： </label>
      <input type="file" name="file2" id="image2" onchange='loadImage(this)'/>
      
           <c:if test="${product.id>0}">
            <img src="<%=basePath %>image/Product/Img.do?id=${product.id}&index=2" width="80" height="80"/>
         </c:if>
         
      <div id="preview_fake" style="filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)">
        <img id="preview" onload="onPreviewLoad(this)" />
      </div>
      
    </td>
  </tr>
  <tr> 
      <td> <form:errors path="image2"/> </td> 
  </tr>
  
   <c:choose>
    <c:when test="${product.model==2}">
        <tr id="tr_img_3">
    </c:when>
    <c:otherwise>
         <tr id="tr_img_3"  style="visibility:hidden">
    </c:otherwise>
  </c:choose>
  
    <td height="80">
      <label for="image3">图片三 ： </label>
      <input type="file" name="file3" id="image3" onchange='loadImage(this)'/>
      
           <c:if test="${product.id>0}">
            <img src="<%=basePath %>image/Product/Img.do?id=${product.id}&index=3" width="80" height="80"/>
         </c:if>
         
      <div id="preview_fake" style="filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)">
        <img id="preview" onload="onPreviewLoad(this)" />
      </div>
      
    </td>
  </tr>
  <tr> 
      <td> <form:errors path="image3" /> </td> 
  </tr>
  
  <tr>
    <td>（图片大小不宜超过1024KB,支持格式 jpg , png ）</td>
  </tr>
  <tr>
    <td>
      <input type="button" value="提  交" onclick="edit(this)"/>
      &nbsp;&nbsp;&nbsp;
      <input type="button" value="取  消" onclick="cancel()"/>
    </td>
  </tr>
</table>
</form:form>



<script type="text/javascript" src="<%=basePath %>js/imagePreview.js"></script>
<script type="text/javascript" src="<%=basePath %>js/formValidate.js"></script>
<script type="text/javascript">

function edit(bt){

   var form=document.getElementById('myForm');
      
   if(confirm('你确定要提交吗？')){
      
       if(emptyValidate(form)){
    
           form.submit();
       }
    }
 }
 

 function cancel(){
    
   window.history.back();
 }


 function validate(form){
  
     if(!emptyValidate(form)){
      
          return false;
      }
      
      return true;
  }
  
  
    function radioClick_1(){
  
     var title=document.getElementById('tr_title'); 
     title.style.visibility='visible';
  
     var content=document.getElementById('tr_content');
     content.style.visibility='visible';
	  
	 var img2=document.getElementById('tr_img_2');
	 img2.style.visibility='hidden';
	 
	  var img3=document.getElementById('tr_img_3');
	 img3.style.visibility='hidden';
  }
  
  function radioClick_2(){
  
      var title=document.getElementById('tr_title'); 
     title.style.visibility='visible';
  
     var content=document.getElementById('tr_content');
     content.style.visibility='visible';
	  
	 var img2=document.getElementById('tr_img_2');
	 img2.style.visibility='visible';
	 
	 var img3=document.getElementById('tr_img_3');
	 img3.style.visibility='hidden';
  }
  
  function radioClick_3(){
  
     var title=document.getElementById('tr_title'); 
     title.style.visibility='visible';
  
     var content=document.getElementById('tr_content');
     content.style.visibility='hidden';
	  
	 var img2=document.getElementById('tr_img_2');
	 img2.style.visibility='visible';
	 
	  var img3=document.getElementById('tr_img_3');
	 img3.style.visibility='visible';
  }
  
  
  function radioClick_4(){

   var content=document.getElementById('tr_content');
   content.style.visibility='hidden';
   
   var img=document.getElementById('tr_img_2');
   img.style.visibility='hidden';
   
    var img3=document.getElementById('tr_img_3');
	img3.style.visibility='hidden';
  }
</script>

  </body>
</html>
